<template>
  <view class="messages-page">
    <!-- 消息列表 -->
    <scroll-view class="message-list" scroll-y>
      <!-- 系统通知 -->
      <view class="message-item" @tap="viewNotification">
        <view class="message-icon system">
          <uni-icons type="notification-filled" size="24" color="#FF9800"></uni-icons>
        </view>
        <view class="message-content">
          <view class="message-header">
            <text class="message-title">系统通知</text>
            <text class="message-time">昨天 17:05</text>
          </view>
          <text class="message-desc">暂无新消息</text>
        </view>
      </view>

      <!-- 营销活动 -->
      <view class="message-item" @tap="viewPromotion">
        <view class="message-icon promotion">
          <uni-icons type="gift-filled" size="24" color="#FF5252"></uni-icons>
        </view>
        <view class="message-content">
          <view class="message-header">
            <text class="message-title">营销活动</text>
            <text class="message-time">昨天 18:06</text>
          </view>
          <text class="message-desc">今日特惠</text>
        </view>
      </view>

      <!-- 商家消息列表 -->
      <view 
        v-for="msg in merchantMessages" 
        :key="msg.id"
        class="message-item"
        @tap="goToMerchantChat(msg)"
      >
        <image :src="msg.avatar" mode="aspectFill" class="message-avatar"></image>
        <view class="message-content">
          <view class="message-header">
            <text class="message-title">{{ msg.merchantName }}</text>
            <text class="message-time">昨天 {{ msg.time }}</text>
          </view>
          <text class="message-desc">{{ msg.lastMessage }}</text>
        </view>
        <view v-if="msg.unreadCount > 0" class="unread-badge">
          {{ msg.unreadCount > 99 ? '99+' : msg.unreadCount }}
        </view>
      </view>

      <!-- 空状态 -->
      <view v-if="merchantMessages.length === 0" class="empty-state">
        <uni-icons type="chatbubble" size="80" color="#ccc"></uni-icons>
        <text class="empty-text">暂无消息</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useUserStore } from '@/store/modules/user';
import { getMessageSessions } from '@/api/message';

const userStore = useUserStore();

// 商家消息列表
const merchantMessages = ref<any[]>([
  {
    id: 1,
    merchantName: '超级麻辣小面馆',
    avatar: '/static/shangjia01.png',
    lastMessage: '您的订单已送达,请及时查收',
    time: '19:15',
    unreadCount: 0
  },
  {
    id: 2,
    merchantName: '意大利牛排',
    avatar: '/static/shangjia02.png',
    lastMessage: '您的订单已送达,请及时查收',
    time: '15:26',
    unreadCount: 0
  }
]);

// 查看系统通知
const viewNotification = () => {
  uni.showToast({
    title: '暂无新通知',
    icon: 'none'
  });
};

// 查看营销活动
const viewPromotion = () => {
  uni.showToast({
    title: '查看营销活动',
    icon: 'none'
  });
};

// 跳转到商家聊天
const goToMerchantChat = (msg: any) => {
  uni.showToast({
    title: '聊天功能开发中',
    icon: 'none'
  });
};

// 加载消息列表
const loadMessages = async () => {
  if (!userStore.userInfo?.customerId) return;

  try {
    const data: any = await getMessageSessions();
    if (Array.isArray(data)) {
      merchantMessages.value = data.map((item: any) => ({
        id: item.sessionId,
        merchantName: item.targetName,
        avatar: item.targetAvatar || '/static/shangjia01.png',
        lastMessage: item.lastMessage,
        time: formatTime(item.lastMessageTime),
        unreadCount: item.unreadCount || 0
      }));
    }
  } catch (error) {
    console.error('加载消息列表失败:', error);
  }
};

// 格式化时间
const formatTime = (time: string) => {
  const date = new Date(time);
  const now = new Date();
  const diff = now.getTime() - date.getTime();
  
  if (diff < 60000) return '刚刚';
  if (diff < 3600000) return `${Math.floor(diff / 60000)}分钟前`;
  if (diff < 86400000) return `${Math.floor(diff / 3600000)}小时前`;
  
  return `${date.getMonth() + 1}-${date.getDate()}`;
};

onMounted(() => {
  loadMessages();
});
</script>

<style scoped>
.messages-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.message-list {
  height: 100vh;
}

.message-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #f0f0f0;
  gap: 20rpx;
  position: relative;
}

.message-icon {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.message-icon.system {
  background-color: #fff3e0;
}

.message-icon.promotion {
  background-color: #ffebee;
}

.message-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  flex-shrink: 0;
}

.message-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.message-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.message-time {
  font-size: 24rpx;
  color: #999;
}

.message-desc {
  font-size: 26rpx;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unread-badge {
  position: absolute;
  top: 30rpx;
  right: 30rpx;
  min-width: 32rpx;
  height: 32rpx;
  padding: 0 8rpx;
  background-color: #ff3b30;
  color: #fff;
  font-size: 20rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 200rpx 0;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-top: 20rpx;
}
</style>